<template>
  <div class="numb-box">
    <div class="icon-box">
      <el-icon :color="color" size="calc(var(--my-change-base12-2x-size) + 10px)">
        <component :is="icon"></component>
      </el-icon>
    </div>
    <div class="text-box">
      <div class="name">{{ name }}</div>
      <div v-if="numb !== null && numb !== undefined">
        <rest-count-to :endVal="numb" :curStyle="valueStyle" :precision="2" :forcedDecimals="false"></rest-count-to>
        <span class="suffix">{{ suffix }}</span>
      </div>
      <span v-else :style="valueStyle">-- --</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { CSSProperties, Component, PropType } from 'vue';
  import RestCountTo from '@/components/rest/rest-count-to/rest-count-to.vue';
  defineProps({
    /** 名称 */
    name: { type: String, required: true },
    /** 数字的后缀 */
    suffix: { type: String, default: '' },
    /** 数值 */
    numb: { type: Number, required: true },
    /** 标题 */
    icon: { type: Object as PropType<Component>, required: true },
    /** 图标颜色 */
    color: { type: String, default: '' },
  });

  const valueStyle: CSSProperties = {
    fontSize: `calc(var(--my-change-base12-2x-size) + 6px)`,
    fontWeight: `bolder`,
    lineHeight: `1em`,
    color: `var(--el-color-primary)`,
  };
</script>

<style lang="scss" scoped>
  .numb-box {
    @include flex(row, nowrap, center, center, center);

    .icon-box {
      padding: 8px;
      margin-right: 8px;
      background: $c-bg-html;
      border-radius: 50%;
    }

    .text-box {
      @include flex(column, nowrap, center, flex-start, center);

      .name {
        margin-bottom: 8px;
        font-size: calc(var(--my-change-base12-2x-size));
        line-height: 1em;
        color: $c-text-1;
      }

      .suffix {
        margin-left: 2px;
        font-size: var(--my-change-base12-2x-size);
        color: var(--el-text-color-primary);
      }
    }
  }
</style>
